<template>
  <div class="main-box">
    <img src="../assets/alarm.png" draggable="false" alt="" class="icon" style="margin-bottom: 58px;margin-top: 52px;"
         @click="showDrawer">
    <img src="@/assets/a_noactive.png" draggable="false" v-show="$store.state.page===2" alt="" @click="turnPage(1)">
    <img src="@/assets/a_active.png" draggable="false" v-show="$store.state.page===1" alt="" @click="turnPage(1)">
    <img src="@/assets/person_active.png" class="person" draggable="false" v-show="$store.state.page===2" alt=""
         @click="turnPage(2)">
    <img src="@/assets/person_noactive.png" class="person" draggable="false" v-show="$store.state.page===1" alt=""
         @click="turnPage(2)">
    <span class="footer">v2.00</span>
    <a-drawer
      title="最新公告"
      placement="right"
      :closable="false"
      :visible="visible"
      width="500"
      @close="onClose"
    >
      <p>【公告21-11-02】节点及套餐变更： 1 新增基础版节点，SIMPLE套餐...</p>
      <p>2021-11-21 14:01:15 </p>
      <div class="divider"></div>
    </a-drawer>
  </div>
</template>

<script>
import store from '../store'

export default {
  name: 'SideBar',
  data () {
    return {
      page: 1,
      visible: false
    }
  },
  methods: {
    turnPage (e) {
      if (e === 1) {
        this.$router.push('/accelerate')
      } else {
        this.$router.push('/personal')
      }
      store.commit('changePage', e)
    },
    showDrawer () {
      this.visible = true
    },
    onClose () {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.main-box {
  width: 78px;
  height: 100vh;
  background-color: #001529;
  text-align: center;
}

.footer {
  position: absolute;
  bottom: 10px;
  left: 25px;
  color: white;
  font-size: 12px;
}

.person {
  margin-top: 34px;
}

.divider {
  border: 1px dashed #f0f0f0;
  width: 100%;
  margin: auto;
  transform: scaleY(0.5);
}
</style>
